import React from 'react';
import { FolderOutlined, FileOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons';

const FileModule = () => {
  const fileSystem = [
    { id: 1, name: 'Documents', type: 'folder', size: '-', modified: '2023-09-30' },
    { id: 2, name: 'Screenshots', type: 'folder', size: '-', modified: '2023-10-01' },
    { id: 3, name: 'config.json', type: 'file', size: '2.3 KB', modified: '2023-09-28' },
    { id: 4, name: 'screenshot_01.jpg', type: 'file', size: '1.8 MB', modified: '2023-10-01' },
    { id: 5, name: 'data.csv', type: 'file', size: '4.7 KB', modified: '2023-09-29' },
  ];

  return (
    <div className="file-module">
      <h3>文件管理</h3>
      <div className="file-browser" style={{
        height: '300px',
        overflow: 'auto',
        backgroundColor: '#222',
        padding: '10px',
        borderRadius: '5px'
      }}>
        <div className="file-header" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 100px 100px',
          padding: '8px',
          borderBottom: '1px solid #444',
          fontWeight: 'bold',
          color: '#ddd'
        }}>
          <div>名称</div>
          <div>大小</div>
          <div>修改日期</div>
        </div>
        
        {fileSystem.map(item => (
          <div key={item.id} className="file-item" style={{
            display: 'grid',
            gridTemplateColumns: '1fr 100px 100px',
            padding: '8px',
            borderBottom: '1px solid #333',
            alignItems: 'center',
            color: '#ccc',
            backgroundColor: item.type === 'folder' ? '#2a2a3a' : '#222'
          }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {item.type === 'folder' ? 
                <FolderOutlined style={{ marginRight: '8px', color: '#8899ff' }} /> : 
                <FileOutlined style={{ marginRight: '8px', color: '#aaaaaa' }} />
              }
              {item.name}
            </div>
            <div>{item.size}</div>
            <div>{item.modified}</div>
          </div>
        ))}
      </div>
      <div className="file-controls" style={{ marginTop: '10px' }}>
        <button style={buttonStyle}>上传文件</button>
        <button style={buttonStyle}><DownloadOutlined /> 下载</button>
        <button style={{...buttonStyle, backgroundColor: '#632'}}>
          <DeleteOutlined /> 删除
        </button>
      </div>
    </div>
  );
};

const buttonStyle = {
  backgroundColor: '#2a2a2a',
  color: 'white',
  border: 'none',
  padding: '5px 10px',
  margin: '0 5px',
  borderRadius: '4px',
  cursor: 'pointer',
  display: 'inline-flex',
  alignItems: 'center',
  gap: '4px'
};

export default FileModule; 